<template>
    <div class="table-comp">
        <el-table :data="tableData" stripe style="width: 100%" height="250">
            <el-table-column fixed type="selection" width="55" align="center" />
            <template v-for="item of tableCols">
                <el-table-column
                    :prop="(item as TableColumnModel).prop"
                    :label="(item as TableColumnModel).label"
                    :width="(item as TableColumnModel).width"
                    :fixed="(item as TableColumnModel).fixed"
                />
            </template>
            <el-table-column fixed="right" label="操作" width="120" v-if="slotOper">
                <template #default="scope">
                    <slot name="oper" :row="scope.row"></slot>
                </template>
            </el-table-column>
        </el-table>
        <div style="float: right;margin-top: 1em;">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                v-model:currentPage="pageIndex"
                v-model:page-size="pageSize"
                :page-sizes="[100, 200, 300, 400]"
                :total="1000"
            ></el-pagination>
        </div>
    </div>
</template>
<script setup lang="ts">
import TableColumnModel from '@/model/TableColumnModel';
import { ref, useSlots, computed } from 'vue'
const pageIndex = ref(1)
const pageSize = ref(100)
const slotOper = computed(() => !!useSlots().oper)

defineProps({
    tableCols: {
        type: Array,
        required: true,
        default: (): Array<TableColumnModel> => [],
        validator: function (value: Array<any>) {
            if (value && value.length > 0) {
                const f = value.every(item => item instanceof TableColumnModel)
                if (!f) console.warn('tableCols参数格式不对，给爷爬~')
                return f
            }
            console.warn('你这也妹有给我tableCols参数啊~')
            return false
        }
    },
    tableData: {
        type: Array,
        required: false,
        default: () => []
    }
})
</script>
<style>
.table-comp {
    width: 100%;
    height: 100%;
}
</style>
